<template>
  <el-container class="home-ywflgl" v-loading="loading">
    <el-header class="header">
      <div class="header-l">
        <el-icon color="#2263BF"><Operation /></el-icon>
        <span class="text">分类列表</span>
      </div>
      <div class="header-r">
        <el-button
          class="panel-btn"
          color="#2263BF"
          type="primary"
          @click="jumpEditorAdd"
          >新 增</el-button
        >
      </div>
    </el-header>
    <el-main>
      <el-container>
        <el-main>
          <el-container>
            <el-main class="container bc-table">
              <el-table
                :data="dataInfo.tableData"
                style="width: 100%; height: 100%"
              >
                <el-table-column
                  type="index"
                  :index="indexMethod"
                  width="60px"
                  label="序号"
                >
                </el-table-column>
                <el-table-column prop="busiTypeName" label="业务分类名称" />
                <el-table-column prop="description" label="描述" />
                <el-table-column
                  prop="relationObjectCount"
                  label="已关联数据表"
                >
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleClick(scope.row)"
                      >{{ scope.row.relationObjectCount }}</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="lastModifyDateTime" label="更新时间">
                  <template #default="scope">
                    <span>{{
                      formatDateTime(scope.row.lastModifyDateTime)
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createDateTime" label="创建时间">
                  <template #default="scope">
                    <span>{{ formatDateTime(scope.row.createDateTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="jumpEditorAdd(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="deleteRow(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
    <!-- 删除 -->
    <SelfDialog
      :dialogVisable="dialogVisable"
      height="320px"
      title="提示"
      @close="close"
      @confirm="confirm"
    >
      <template #default>
        <div class="center_content">
          <img class="icon-img" src="../../../assets/images/gth.png" />
          <p class="text">是否确认删除，删除后无法撤回</p>
        </div>
      </template>
    </SelfDialog>
    <!-- 新增 -->
    <SelfDialog
      :dialogVisable="addVisable"
      :title="formValue.busiTypeCode ? '编辑业务分类' : '新增业务分类'"
      @close="confirmAdd(1)"
      @confirm="confirmAdd(2)"
    >
      <template #default>
        <div class="center_content">
          <el-form
            ref="ruleFormRef"
            :model="formValue"
            :rules="rules"
            label-width="auto"
            class="ruleForm"
          >
            <el-form-item label="业务分类名称" prop="busiTypeName">
              <el-input v-model="formValue.busiTypeName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务分类描述" prop="description">
              <el-input
                v-model="formValue.description"
                :rows="4"
                type="textarea"
                placeholder="请输入"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
    </SelfDialog>
    <!-- 抽屉 -->
    <Clint
      :currentRow="currentRow"
      v-if="showClint"
      @close="showClint = false"
    ></Clint>
  </el-container>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getYwflList, delfl, updatefl } from "@/api/ywflgl";
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import SelfDialog from "@/components/dialog/dialog.vue";
import Clint from "./clint.vue";
import { Minxfun } from "@/utils/minxin";
const { formatDateTime } = Minxfun();
const router = useRouter();
const indexMethod = (index) => {
  return index + 1;
};

onMounted(() => {
  getTableData();
});
let dataInfo = reactive({
  tableData: [],
});
let pageInfo = ref({ pageNo: 1, pageSize: 10 });
let loading = ref(false);
const getTableData = async () => {
  try {
    loading.value = true;
    let { data } = await getYwflList();
    dataInfo.tableData = data.busiTypeList;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
};

let currentRow = ref(null);
let showClint = ref(false);
const handleClick = (value) => {
  currentRow.value = value;
  showClint.value = true;
};
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};

// 新增或者编辑
const rules = reactive({
  busiTypeName: [
    {
      required: true,
      message: "请输入分类名称",
      trigger: "blur",
    },
  ],
  description: [
    {
      required: true,
      message: "请输入分类描述",
      trigger: "blur",
    },
  ],
});
const ruleFormRef = ref();
let formValue = reactive({
  busiTypeName: "",
  description: "",
  busiTypeCode: "",
});

const addVisable = ref(false);
const jumpEditorAdd = (value) => {
  if (value) {
    // formValue = {
    //   busiTypeName: value.busiTypeName,
    //   description: value.description,
    //   busiTypeCode: value.busiTypeCode,
    // };
    formValue.busiTypeName = value.busiTypeName;
    formValue.description = value.description;
    formValue.busiTypeCode = value.busiTypeCode;
  } else {
    formValue.busiTypeName = "";
    formValue.description = "";
    formValue.busiTypeCode = "";
  }
  addVisable.value = true;
};

// 新增或者编辑
const confirmAdd = (type) => {
  if (type === 1) {
    addVisable.value = false;
  } else {
    ruleFormRef.value.validate(async (valid, fields) => {
      if (!valid) return;
      let { data } = await updatefl({
        ...formValue,
      });
      addVisable.value = false;
      ElMessage({
        message: formValue.busiTypeCode ? "编辑成功" : "新增成功",
        type: "success",
      });
      getTableData();
    });
  }
};

let dialogVisable = ref(false);
// 删除
let delCurrentRow = ref({});
const deleteRow = async (row) => {
  dialogVisable.value = true;
  delCurrentRow.value = row;
};

// 取消删除
const close = () => {
  dialogVisable.value = false;
};

// 确认删除
const confirm = async () => {
  try {
    let { data } = await delfl({
      busiTypeCode: delCurrentRow.value.busiTypeCode,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getTableData();
    dialogVisable.value = false;
  } catch (e) {
    console.error(e);
  }
};
</script>

<style lang="scss" scoped>
.home-ywflgl {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
    .header-r {
      .panel-btn {
        width: 100px;
        height: 36px;
        line-height: 36px;
        box-sizing: border-box;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.ruleForm {
  margin: 0 50px;
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
